<template>
    <div class="fun_conction">
        <!-- 物业类基础服务(线上缴费、报事报修、智能门禁) -->
        <div class="fun wuye">
            <div class="zi">
                <span>物业类基础服务</span>
            </div>
            <div class="function">
                <div id="gongneng11" class="gongneng2" @click="PaymentOnline">
                    <div class="topright"> 
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-jiaofei"></use>
                        </svg>
                    </div>
                    <span>线上缴费</span>
                </div>
                <div id="gongneng11" class="gongneng2" @click="baoshibaoxiu">
                    <div class="topright"> 
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-baoshibaoxiu1"></use>
                        </svg>
                    </div>
                    <span>报事报修</span>
                </div>
                <div id="gongneng11" class="gongneng2" @click="zhinengmenjin">
                    <div class="topright"> 
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-menjin"></use>
                        </svg>
                    </div>
                    <span>智能门禁</span>
                </div>
                <!-- <div id="gongneng11" class="gongneng2">
                    <div class="topright"> 
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-zhoubianyou"></use>
                        </svg>
                    </div>
                    <span>报事报修</span>
                </div> -->

            </div>
        </div>

        <!-- 家居类服务(保洁、保姆、外卖、日用品/生鲜类电商) -->
        <div class="fun jiaju">
            <div class="zi">
                <span>家居类服务</span>
            </div>
            <div class="function">
                <div id="gongneng11" class="gongneng2" @click="baomubaojie">
                    <div class="topright"> 
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon--baojiefuwu"></use>
                        </svg>
                    </div>
                    <span>保洁保姆</span>
                </div>
                <div id="gongneng11" class="gongneng2" @click="waimaidiaoshang">
                    <div class="topright"> 
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-waimai"></use>
                        </svg>
                    </div>
                    <span>外卖电商</span>
                </div>
                <!-- <div id="gongneng11" class="gongneng2">
                    <div class="topright"> 
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-zhoubianyou"></use>
                        </svg>
                    </div>
                    <span>智能门禁</span>
                </div> -->
                <!-- <div id="gongneng11" class="gongneng2">
                    <div class="topright"> 
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-zhoubianyou"></use>
                        </svg>
                    </div>
                    <span>报事报修</span>
                </div> -->

            </div>
        </div>

        <!-- 社区类活动(邻里互助、社区公共服务) -->
        <div class="fun shequ">
            <div class="zi">
                <span>社区类活动</span>
            </div>
            <div class="function">
                <div id="gongneng11" class="gongneng2" @click="linglihuzhu">
                    <div class="topright"> 
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-linlihuzhu"></use>
                        </svg>
                    </div>
                    <span>邻里互助</span>
                </div>
                <div id="gongneng11" class="gongneng2" @click="shequgonggongfuwu">
                    <div class="topright"> 
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shequfuwuzhan"></use>
                        </svg>
                    </div>
                    <span>社区公共服务</span>
                </div>
                <!-- <div id="gongneng11" class="gongneng2">
                    <div class="topright"> 
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-zhoubianyou"></use>
                        </svg>
                    </div>
                    <span>报事报修</span>
                </div>
                <div id="gongneng11" class="gongneng2">
                    <div class="topright"> 
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-zhoubianyou"></use>
                        </svg>
                    </div>
                    <span>报事报修</span>
                </div> -->

            </div>
        </div>

    </div>

</template>

<script>
export default{
    name:"Homepager",
    methods:{
        baomubaojie(){
            this.$router.replace('/baomubaojie')
        },
        waimaidiaoshang:function(){
            this.$router.replace('/waimaidiaoshang')
        },
        linglihuzhu:function(){
            this.$router.replace('/linglihuzhu')
        },
        shequgonggongfuwu:function(){
            this.$router.replace('/shequgonggongfuwu')
        },
        PaymentOnline:function(){
            this.$router.replace('/PaymentOnline')
        },
        baoshibaoxiu:function(){
            this.$router.replace('/baoshibaoxiu')
        },
        zhinengmenjin:function(){
            this.$router.replace('/zhinengmenjin')
        }
    }
}
</script>


<style lang="less" scoped>
.fun_conction{
    margin-top: 7px;
    width: 390px;
}
.fun{
    width: 80%px;
    height: 150px;
    padding: 15px 10px 0 10px;
}
.wuye{
    background:rgb(215, 235, 213);
}
.jiaju{
    background:rgb(232, 243, 231);
}
.shequ{
    background: rgb(215, 235, 213);
}
.function{
    width: 80%;
    margin: auto;
    display: flex;                 ///！！！！！！
    justify-content: space-between; ///！！！！！！
    align-items: center;//垂直居中
}
.zi{
    
    margin-left: 10px;
    margin-bottom: 20px;
    
}
</style>